    Ext.define('upload.UploadPanel',{  
        extend:"Ext.panel.Panel",  
        alias:"widget.multiFileUploadPanel",  
        layout : 'fit',
          config:{  
            //处理上传文件的服务器端页面的url地址，可以是绝对地址，也可以是相对地址，当为相对地址时相对的是当前代码所在的文档地址  
            //upload_url:"/fileUpload.do", 
            upload_url: '',
		    flash_url: '',
            //swfupload.swf文件的绝对或相对地址，相对地址是指相对于当前的页面地址。实例化swfupload后，就不能再改变该属性的值了  
            //flash_url:"/swfupload/swfupload.swf",  
            file_post_name:"",  
            //上传文件最大体积100MB 有效的单位有B、KB、MB、GB，默认单位是KB  
            file_size_limit:'1000MB',  
            //该属性指定了允许上传的文件类型，当有多个类型时使用分号隔开，比如：*.jpg;*.png ,允许所有类型时请使用 *.*  
            file_types:'*.*',  
            //设置文件选择对话框中显示给用户的文件描述。默认值All Files  
            file_types_description:'All Files',  
            //这里限制的是一个SWFUpload实例控制上传成功的文件总数。最大队列数，把该属性设为0时表示不限制文件的上传数量。  
            file_upload_limit:0,  
            //post_params定义了一些键/值对，允许在上传每个文件时候捎带地post给服务器  
            post_params:{}  
        },  
      
     
      
    UploadPanel : function(){  
        this.width = 510;  
        this.height = 200;  
        
        this.gp = new Ext.grid.EditorGridPanel({//修改为可编辑表格  
            border :false,  
            selModel: new Ext.grid.RowSelectionModel({  
      
            }),  
            store: new Ext.data.Store({  
                fields:['id','name','type','size','state','percent','detail']  
            }),  
            columns: [  
                new Ext.grid.RowNumberer(),  
                {header: '文件名', width: 150, sortable: true,dataIndex: 'name', menuDisabled:true},  
                {header: '类型', width: 50, sortable: true,dataIndex: 'type', menuDisabled:true},  
                {header: '大小', width: 70, sortable: true,dataIndex: 'size', menuDisabled:true,renderer:this.formatFileSize},  
                {header: '文件说明', width: 100, sortable: true,dataIndex: 'detail', menuDisabled:true,editor: {xtype: 'textfield'}},//-------二次修改------  
                {header: '进度', width: 150, sortable: true,dataIndex: 'percent', menuDisabled:true,renderer:this.formatProgressBar,scope:this},  
                {header: '状态', width: 70, sortable: true,dataIndex: 'state', menuDisabled:true,renderer:this.formatFileState,scope:this},  
                {header: ' ',width:40,dataIndex:'id', menuDisabled:true,renderer:this.formatDelBtn}         
            ]             
        });  
        this.setting = {  
            upload_url : this.uploadUrl,   
            flash_url : this.flashUrl,  
            file_size_limit : this.fileSize || (1024*50) ,//上传文件体积上限，单位MB  
            file_post_name : this.filePostName,  
            file_types : this.fileTypes||"*.*",  //允许上传的文件类型   
            file_types_description : "All Files",  //文件类型描述  
            file_upload_limit : "0",  //限定用户一次性最多上传多少个文件，在上传过程中，该数字会累加，如果设置为“0”，则表示没有限制   
            //file_queue_limit : "10",//上传队列数量限制，该项通常不需设置，会根据file_upload_limit自动赋值                
            post_params : this.postParams||{Detail:'ok'} ,  
            use_query_string : true,  
            debug : false,  
            button_cursor : SWFUpload.CURSOR.HAND,  
            button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,  
            custom_settings : {//自定义参数  
                scope_handler : this  
            },  
            file_queued_handler : this.onFileQueued,  
            swfupload_loaded_handler : function(){},// 当Flash控件成功加载后触发的事件处理函数  
            file_dialog_start_handler : function(){},// 当文件选取对话框弹出前出发的事件处理函数  
            file_dialog_complete_handler : this.onDiaogComplete,//当文件选取对话框关闭后触发的事件处理  
            upload_start_handler : this.onUploadStart,// 开始上传文件前触发的事件处理函数  
            upload_success_handler : this.onUploadSuccess,// 文件上传成功后触发的事件处理函数   
            swfupload_loaded_handler : function(){},// 当Flash控件成功加载后触发的事件处理函数    
            upload_progress_handler : this.uploadProgress,  
            upload_complete_handler : this.onUploadComplete,  
            upload_error_handler : this.onUploadError,  
            file_queue_error_handler : this.onFileError  
        };  
        UploadPanel.superclass.constructor.call(this,{               
            tbar : [  
                {text:'添加文件',iconCls:'btn-add',ref:'../addBtn'},'-',  
                {text:'上传',ref:'../uploadBtn',iconCls:'btn-up',handler:this.startUpload,scope:this},'-',  
                {text:'停止上传',ref:'../stopBtn',iconCls:'btn-cancel',handler:this.stopUpload,scope:this,disabled:true},'-',  
                {text:'删除所有',ref:'../deleteBtn',iconCls:'btn-clear',handler:this.deleteAll,scope:this},'-'  
            ],  
            layout : 'fit',  
            items : [this.gp],  
            listeners : {  
                'afterrender':function(){  
                    var em = this.getTopToolbar().get(0).el.child('em');  
                    var placeHolderId = Ext.id();  
                    em.setStyle({  
                        position : 'relative',  
                        display : 'block'  
                    });  
                    em.createChild({  
                        tag : 'div',  
                        id : placeHolderId  
                    });  
                    this.swfupload = new SWFUpload(Ext.apply(this.setting,{  
                        button_width : em.getWidth(),  
                        button_height : em.getHeight(),  
                        button_placeholder_id :placeHolderId  
                    }));  
                    this.swfupload.uploadStopped = false;  
                    Ext.get(this.swfupload.movieName).setStyle({  
                        position : 'absolute',  
                        top : 0,  
                        left : 0  
                    });               
                },  
                scope : this,  
                delay : 100  
            }  
        });  
      
    Ext.extend(UploadPanel,Ext.Panel,{  
        toggleBtn :function(bl){  
            this.addBtn.setDisabled(bl);  
            this.uploadBtn.setDisabled(bl);  
            this.deleteBtn.setDisabled(bl);  
            this.stopBtn.setDisabled(!bl);  
            this.gp.getColumnModel().setHidden(7,bl);  
        },  
        onUploadStart : function(file) {    
           var post_params = this.settings.post_params;    
           Ext.apply(post_params,{//处理中文参数问题  
                //fileName : file.name,  
                fileName : encodeURIComponent(file.name)  
           });    
           this.setPostParams(post_params); //-------二次修改------  
           var det="";  
           var me = this.customSettings.scope_handler;  
           var ds = me.gp.store;  
           for(var i=0;i<ds.getCount();i++){  
                var record =ds.getAt(i);  
                if(record.get('id')==file.id)  
                    det=record.get('detail');  
           }  
           this.addFileParam(file.id ,"detail",det);//-------二次修改------  
        },  
        startUpload : function() {  
            if (this.swfupload) {  
                if (this.swfupload.getStats().files_queued > 0) {  
                    this.swfupload.uploadStopped = false;  
                    this.toggleBtn(true);  
                    this.swfupload.startUpload();  
                }  
            }  
        },  
        formatFileSize : function(_v, celmeta, record) {  
            return Ext.util.Format.fileSize(_v);  
        },  
        formatFileState : function(n){//文件状态  
            switch(n){//-------二次修改------  
                case -1 : return '<img src="/skin/images/152.png"/><span style="color:green;">  未上传</span>';  
                break;  
                case -2 : return '<img src="/skin/images/147.png"/><span style="color:brown;">  正在上传</span>';  
                break;  
                case -3 : return '<img src="/skin/images/151.png"/><span style="color:red;">  上传失败</span>';  
                break;  
                case -4 : return '<img src="/skin/images/102.png"/><span style="color:green;">  上传成功</span>';  
                break;  
                case -5 : return '<img src="/skin/images/050.png"/><span style="color:#CECEFF;">  取消上传</span>';  
                break;  
                default: return n;//-------二次修改------  
            }  
        },  
        formatProgressBar : function(v){  
            var progressBarTmp = this.getTplStr(v);  
            return progressBarTmp;  
        },  
        getTplStr : function(v){  
            var bgColor = "orange";  
            var borderColor = "#008000";  
            return String.format(  
                '<div>'+  
                    '<div style="border:1px solid {0};height:10px;width:{1}px;margin:4px 0px 1px 0px;float:left;">'+        
                        '<div style="float:left;background:{2};width:{3}%;height:10px;"><div></div></div>'+  
                    '</div>'+  
                '<div style="text-align:center;float:right;width:40px;margin:3px 0px 1px 0px;height:10px;font-size:12px;">{3}%</div>'+            
            '</div>', borderColor,(90),bgColor, v);  
        },  
        onUploadComplete : function(file) {  
            var me = this.customSettings.scope_handler;  
            if(file.filestatus==-4){  
                var ds = me.gp.store;  
                for(var i=0;i<ds.getCount();i++){  
                    var record =ds.getAt(i);  
                    if(record.get('id')==file.id){  
                        record.set('percent', 100);  
                        if(record.get('state')!=-3){  
                            record.set('state', file.filestatus);  
                        }  
                        record.commit();  
                    }  
                }  
            }  
              
            if (this.getStats().files_queued > 0 && this.uploadStopped == false) {  
                this.startUpload();  
            }else{            
                me.toggleBtn(false);  
                me.linkBtnEvent();  
            }         
        },  
        onFileQueued : function(file) {  
            var me = this.customSettings.scope_handler;  
            var rec = new Ext.data.Record({  
                id : file.id,  
                name : file.name,  
                size : file.size,  
                type : file.type,  
                state : file.filestatus,  
                percent : 0  
            });  
            me.gp.getStore().add(rec);  
        },  
        onUploadSuccess : function(file, serverData) {  
            var me = this.customSettings.scope_handler;  
            var ds = me.gp.store;  
            if (Ext.util.JSON.decode(serverData).success) {           
                for(var i=0;i<ds.getCount();i++){  
                    var rec =ds.getAt(i);  
                    if(rec.get('id')==file.id){  
                        rec.set('state', file.filestatus);  
                        rec.commit();  
                    }  
                }             
            }else{  
                for(var i=0;i<ds.getCount();i++){  
                    var rec =ds.getAt(i);  
                    if(rec.get('id')==file.id){  
                        rec.set('percent', 0);  
                        rec.set('state', -3);  
                        rec.commit();  
                    }  
                }  
            }  
            me.linkBtnEvent();  
            caF(file,serverData);//上传成功后调用自定义函数  
        },  
        uploadProgress : function(file, bytesComplete, totalBytes){//处理进度条  
            var me = this.customSettings.scope_handler;  
            var percent = Math.ceil((bytesComplete / totalBytes) * 100);  
            percent = percent == 100? 99 : percent;  
            var ds = me.gp.store;  
            for(var i=0;i<ds.getCount();i++){  
                var record =ds.getAt(i);  
                if(record.get('id')==file.id){  
                    record.set('percent', percent);  
                    record.set('state', file.filestatus);  
                    record.commit();  
                }  
            }  
        },  
        onUploadError : function(file, errorCode, message) {  
            var me = this.customSettings.scope_handler;  
            me.linkBtnEvent();  
            var ds = me.gp.store;  
            for(var i=0;i<ds.getCount();i++){  
                var rec =ds.getAt(i);  
                if(rec.get('id')==file.id){  
                    rec.set('percent', 0);  
                    rec.set('state', file.filestatus);  
                    rec.commit();  
                }  
            }  
        },  
        onFileError : function(file,n){  
            switch(n){  
                case -100 : tip('待上传文件列表数量超限，不能选择！');  
                break;  
                case -110 : tip('文件太大，不能选择！');  
                break;  
                case -120 : tip('该文件大小为0，不能选择！');  
                break;  
                case -130 : tip('该文件类型不可以上传！');  
                break;  
            }  
            function tip(msg){  
                Ext.Msg.show({  
                    title : '提示',  
                    msg : msg,  
                    icon : Ext.Msg.WARNING,  
                    buttons :Ext.Msg.OK  
                });  
            }  
        },  
        onDiaogComplete : function(){  
            var me = this.customSettings.scope_handler;  
            me.linkBtnEvent();  
        },  
        stopUpload : function() {  
            if (this.swfupload) {  
                this.swfupload.uploadStopped = true;  
                this.swfupload.stopUpload();  
            }  
        },  
        deleteAll : function(){  
            var ds = this.gp.store;  
            for(var i=0;i<ds.getCount();i++){  
                var record =ds.getAt(i);  
                var file_id = record.get('id');  
                this.swfupload.cancelUpload(file_id,false);           
            }  
            ds.removeAll();  
            this.swfupload.uploadStopped = false;  
        },  
        formatDelBtn : function(v){  
            return "<a href='#' id='"+v+"'  style='color:blue' class='link-btn' ext:qtip='移除该文件'>移除</a>";  
        },  
        linkBtnEvent : function(){  
            Ext.select('a.link-btn',false,this.gp.el.dom).on('click',function(o,e){  
                var ds = this.gp.store;  
                for(var i=0;i<ds.getCount();i++){  
                    var rec =ds.getAt(i);  
                    if(rec.get('id')==e.id){  
                        ds.remove(rec);  
                    }  
                }             
                this.swfupload.cancelUpload(e.id,false);  
            },this);  
        }
        
    });    
    }   
    }); 
    